<template>
	<view>
		<view class="market_tab">
			<u-tabs :list="tabList" @click="changeTab" :scrollable="false" :current="selectIndex"></u-tabs>
		</view>
		<view class="list" v-if="saleList.length>0">
			<view class="list-item" v-for="item in saleList" :key="item.id">
				<!-- <image :src="item.avatar" class="avatar"></image> -->
				<view class="info">
					<view class="details">
						<text class="quantity">出售：{{ item.number }} 钻石</text>
					</view>
					<view class="price">价格：￥{{ item.price }}</view>
					<view class="time">时间：{{ item.add_time }}</view>
				</view>
				<button class="buy-button" @click="goUp(item)" v-if="selectIndex === 0">上架</button>
				<button class="buy-button" @click="userDiamondDown(item)" v-if="selectIndex === 1">下架</button>
			</view>
		</view>
		<view v-else>
			<emptyPage :title='$t(`暂无数据~`)'></emptyPage>
		</view>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue'
	import {
		userDiamondlist,
		userDiamondUp,
		userDiamondDown
	} from "@/api/api.js"
	export default {
		data() {
			return {
				tabList: [{
					name: '已撤销',
				}, {
					name: '出售中',
				}, {
					name: '已完成'
				}],
				saleList: [],
				selectIndex: 0
			}
		},
		components: {
			emptyPage
		},
		onShow() {
			this.userDiamondlist();
		},
		methods: {
			goUp(item) {
				uni.navigateTo({
					url: `/pages/market/market_edit/market_edit?id=${item.id}&&number=${item.number}&&price=${item.price}`
				})
			},
			// 下架
			userDiamondDown(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: `您确定要下架该订单吗？`,
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							userDiamondDown({
								id: item.id,
								number: item.number,
								price: item.price
							}).then(res => {
								uni.showToast({
									title: "下架成功",
									icon: "success"
								})
								that.userDiamondlist();
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: "none"
								})
							})
						} else if (res.cancel) {}
					}
				})
			},
			// 上架
			userDiamondUp(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: `您确定要上架该订单吗？`,
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							userDiamondUp({
								id: item.id,
								number: item.number,
								price: item.price
							}).then(res => {
								uni.showToast({
									title: "上架成功",
									icon: "success"
								})
								that.userDiamondlist();
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: "none"
								})
							})
						} else if (res.cancel) {}
					}
				})

			},
			userDiamondlist() {
				userDiamondlist({
					type: 0,
					status: this.selectIndex
				}).then(res => {
					this.saleList = res.data.list;
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: "none"
					})
				})
			},
			changeTab(e) {
				console.log("change变化", e);
				this.selectIndex = e.index;
				this.userDiamondlist();
			}
		}
	}
</script>

<style>
	.market_tab {
		background: #fff;
	}

	.list {
		background: #fff;
		margin-top: 20rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
	}

	.details {
		margin-bottom: 10rpx;
	}

	.quantity {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.price {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.time {
		font-size: 25rpx;
		color: #999;
	}

	.buy-button {
		background-color: rgba(29, 176, 252, 1);
		/* 蓝色主题色 */
		color: #fff;
		padding: 16rpx 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>